<template>
    <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"

export default {
    name: "MapRevolve.component",
    components: {Mapbox},
    setup() {

        const rotateCamera = (timestamp) => {
            // clamp the rotation between 0 -360 degrees
            // Divide timestamp by 100 to slow rotation to ~10 degrees / sec
            mapStore.value.rotateTo((timestamp / 100) % 360, {duration: 0});
            // Request the next frame of the animation.
            requestAnimationFrame(rotateCamera);
        }

        let mapStore = ref({});
        let mapOnLoadCB = (map) => {
            mapStore.value = map;

            // Start the animation.
            rotateCamera(0);

            // Add 3d buildings and remove label layers to enhance the map
            let layers = map.getStyle().layers;
            for (let i = 0; i < layers.length; i++) {
                if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
                    // remove text labels
                    map.removeLayer(layers[i].id);
                }
            }

            map.addLayer({
                'id': '3d-buildings',
                'source': 'composite',
                'source-layer': 'building',
                'filter': ['==', 'extrude', 'true'],
                'type': 'fill-extrusion',
                'minzoom': 15,
                'paint': {
                    'fill-extrusion-color': '#aaa',

                    // use an 'interpolate' expression to add a smooth transition effect to the
                    // buildings as the user zooms in
                    'fill-extrusion-height': [
                        "interpolate", ["linear"], ["zoom"],
                        15, 0,
                        15.05, ["get", "height"]
                    ],
                    'fill-extrusion-base': [
                        "interpolate", ["linear"], ["zoom"],
                        15, 0,
                        15.05, ["get", "min_height"]
                    ],
                    'fill-extrusion-opacity': .6
                }
            });
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped>

</style>